Naker Form Viewer #
A standalone library to add interaction to your form #
Getting Started #
Import the Javascript Form Viewer in the header of your website :
<script data-who='💎 Made with naker.io 💎' src='https://d23jutsnau9x47.cloudfront.net/form/v1.0.3/viewer.js' ></script>
This line will import the nakerform
global variable to your website.
Usage #
You then need to choose the html element which will be used to draw the form. You can just select this node by its id
like this :
var container = document.getElementById('container');
Same thing with the form which will be linked to the 3D content, let’s select it by its tag name :
var form = document.getElementByTagName('FORM');
Use the render function of the viewer and your form options in order to automatically create your 3D illustration like so :
nakerform.render({
container: document.getElementById('container'),
form: document.getElementByTagName('FORM')
});
Options #
You must also add some options to the render function. Type rgbArray:[r, g, b] and Vector3:{x:number, y:number, z:number}
Particle #
Name | Type | Description |
---|---|---|
url | string | The image url used to create effect |
size | number | Size of the image |
shape | string | The shape of the particles (cube, sphere, etc) |
pieces | number | The number of particle to draw |
positionFusion | Vector3 | Position change when form is filled in |
rotationFusion | Vector3 | Rotation change when form is filled in |
scalingFusion | Vector3 | Scaling change when form is filled in |
alphaFusion | boolean | Alpha change when form is filled in |
gravityExplosion | Vector3 | Gravity on particle when form validation |
powerExplosion | number | Power of particle movement when form validation |
Environment #
Name | Type | Description |
---|---|---|
sensitivity | number | Sensitivity of the camera when the mouse move |
colorStart | rgbArray | Color of the top background |
colorEnd | rgbArray | Color of the top background |
gradient | ‘horizontal’, ‘vertical’ or ‘radial’ | The way the gradient is drawn |
Result #
At the end your render function will work like this:
nakerform.render({
container: document.getElementById('container'),
particle:{
url: "https://asset.naker.io/image/main/Logo_Naker_NEW.png",
shape: "cube",
pieces: 756,
size: 20,
positionFusion: {x: 1,y: 1,z: 1},
rotationFusion: {x: 1,y: 1,z: 1},
scalingFusion: {x: -1,y: -1,z: -1},
alphaFusion: false,
gravityExplosion: {x: 0,y: 0,z: 0},
powerExplosion: 0.1
},
environment: {
sensitivity: 0.96,
colorStart: [0,0,0,1],
colorEnd: [234,0,255,1],
gradient: 'vertical'
}
});
Note that the container object will need to have a position style defined, as we use absolute position of the canvas which draw the 3D scene, without a position on the container the canvas could go outside.
Plus if you need specific options, we are open to it. Send us an email to support@naker.io
Examples #
To see it in action, follow this link: Form viewer